<template>
	<view class="adv-box" style="width: 725rpx;overflow: hidden;border-radius: 25rpx; margin: 0 auto;" >


		<view class="type1 bgc u-flex">
			<!-- <view style=";;border-radius: 5%;"> -->
			<view style="
			border-bottom: #f8f8f8 1rpx solid;
			border-right:#f8f8f8 1rpx solid;
			width: 350rpx;
			 ">
				<view
				style="display: flex;
				direction: row;
				align-items: center;
				 ">
					<text class="text_h1">{{info[0].title}}</text>
					<!-- <image style="width:40rpx;height:50rpx;text-align: center;padding-top:4rpx;padding-left: 10rpx;;"
						:src="detailname.themeimg"></image> -->
						<!-- <img src="https://image.hzwltb69.com/app/imgs/live/vip.png" style="width: 40rpx;height: 40rpx;margin-left: 10rpx;" alt=""> -->
				</view>
				<view class="" style="display: flex;">
					<view class="type1-img" 
					@tap="jump(info[0].path,info[0].id,info[0].title)"
					style="
					width: 320rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-left: 20rpx;
					position: relative;
					">
						<image :src="info[0].images[0]" style="height: 130rpx;width: 130rpx;"></image>
						<image :src="info[0].images[1]"
						mode="heightFix"
						 style="
						 height: 220rpx;
						 position: absolute;
						 right: -25rpx;
						 bottom: 10rpx;
						 "></image>
					</view>
				</view>
			</view>
			<view style="border-bottom: #f8f8f8 1rpx solid;
			width: 370rpx;
				 "
				>
				<view style="display: flex;
				direction: row;
				align-items: center;
				">
					<text class="text_h1">{{info[1].title}}</text>
				</view>
				<view class=""  @tap="jump(info[1].path,info[1].id,info[1].title)" style="display: flex;">
					<view class="type1-img" style="display: flex;justify-content: center;align-items: center;width: 220rpx;">
						<image :src="info[1].images[0]" style="width: 130rpx;height: 130rpx;">
						</image>
					</view>
					<view class="type1-img"
					 style="
					 display: flex;
					 justify-content: center;
					 align-items: center;
					 width: 220rpx;
					 position: relative;
					 ">
						<image :src="info[1].images[1]"
						mode="heightFix"
						 style="
						 height: 220rpx;
						 position: absolute;
						 bottom: 10rpx;
						 max-width: 220rpx !important;
						 ">
						</image>
					</view>
				</view>
<!-- 				<image v-if="store[0]" class="type1-img" @tap="jump(2)" :src="store[0].medium" mode="aspectFill">
				</image>
				<image v-if="store[1]" class="type1-img" @tap="jump(2)" :src="store[1].medium" mode="aspectFill">
				</image> -->
			</view>
		</view>
		<view class="type1 u-flex" style="padding-top: 6rpx;background: #fff;">
			<view style="border-right: #f8f8f8 1rpx solid;width: 350rpx;">
				<view style="display: flex;direction: row;align-items: center;">
					<text class="text_h1">{{info[2].title}}</text>
					<!-- <image style="width:130rpx;height:46rpx;text-align: center;padding-top:10rpx;padding-left: 10rpx;;"
						:src="youxuanname.themeimg"></image> -->
				</view>
<!-- 				<image v-if="youxuan[0]" class="type1-img" @tap="jump(3)" :src="youxuan[0].img" mode="aspectFill">
				</image>
				<image v-if="youxuan[1]" class="type1-img" @tap="jump(3)" :src="youxuan[1].img" mode="aspectFill">
				</image> -->
				<view class="" @tap="jump(info[2].path,info[2].id,info[2].title)" style="display: flex;">
					<view class=""
					style="
					display: flex;
					justify-content: center;
					align-items: center;
					width: 180rpx;
					height: 140rpx;
					padding-top: 30rpx;
					">
						<image :src="info[2].images[0]" class="type1-img" alt="" style="width: 130rpx;height: 130rpx;" />
					</view>
					<view class="type1-img" 
					style="
					 display: flex;
					 justify-content: center;
					 align-items: center;
					 width: 220rpx;
					 position: relative;
					">
						<image 
						:src="info[2].images[1]"
						mode="heightFix"
						alt=""
						style="
						height: 220rpx;
						 position: absolute;
						 bottom: 10rpx;
						 max-width: 220rpx !important;"
						/>
					</view>
				</view>
			</view>
			<view>
				<view style="display: flex;direction: row;">
					<text class="text_h1">{{info[3].title}}</text>
						<img src="https://image.hzwltb69.com/app/imgs/live/hots.png" style="width: 50rpx;height: 50rpx;margin-left: 3rpx;margin-top:15rpx;" alt="">
<!-- 					<image
						style="-webkit-flex: 1;;width:120rpx;height:46rpx;text-align: center;padding-top:10rpx;padding-left: 10rpx;margin-right: 30rpx"
						:src="zhuanquname.themeimg"></image> -->
				</view>
<!-- 				<image v-if="zhuanqu[0]" class="type1-img" @tap="jump(4)" :src="zhuanqu[0].img" mode="aspectFill">
				</image>
				<image v-if="zhuanqu[1]" class="type1-img" @tap="jump(4)" :src="zhuanqu[1].img" mode="aspectFill">
				</image> -->
				<view class="" @tap="jump(info[3].path,info[3].id,info[3].title)" style="display: flex;">
					<view class=""
					 style="
					 display: flex;
					 justify-content: center;
					 align-items: center;
					 width: 180rpx;
					 height: 140rpx;
					 ">
						<image :src="info[3].images[0]" class="type1-img" alt="" style="width: 130rpx;height: 130rpx;" />
					</view>
					<view
					class="type1-img"
					 style="
					 display: flex;
					 justify-content: center;
					 align-items: center;
					 width: 230rpx;
					 position: relative;
					 ">
						<image 
						:src="info[3].images[1]"
						mode="heightFix"
						alt=""
						style="
						height: 220rpx;
						position: absolute;
						bottom: 10rpx;
						right:30rpx;
						max-width: 220rpx !important;"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 自定义之广告魔方
	 * @property {Object} detail -广告魔方信息
	 */
	export default {
		components: {},
		data() {
			return {
				info: []
			};
		},
		props: {
			detail: {},
			store: {},
			zhuanqu: {},
			youxuan: {},
			detailname: {},
			storename: {},
			zhuanquname: {},
			youxuanname: {},

		},
		created() {
			this.$http('common.getDetailmodule',{})
			.then(res=>{
				this.info = res.data
			})
		},
		computed: {},
		methods: {
			// 路由跳转
			jump(path,id,title) {
				if(id){
					this.$Router.push({
						path: `${path}`,
						query:{
							themeFloorId:id,
							name:title
						}
					});
				}else{
					this.$Router.push({
						path: `${path}`
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	@mixin grid($row: 1) {
		width: (740 - ($row - 1) * 10) / $row + rpx;
		border-radius: 10rpx;
	}

	.adv-box {
		margin-top: 18rpx !important;
		.type1 {
			// border-top-right-radius: 20rpx;
			// border-top-left-radius: 20rpx;
			.type1-img {
				width: 180rpx;
				height: 180rpx;
				 padding: 2rpx;
			}
		}
		.bgc{
			background: url(https://image.hzwltb69.com/app/date/2023/navbgctwo.png);
			background-size: 100% !important;
		}

	}
	.text_h1{
		font-size: 34rpx;
		height: 60rpx;
		line-height:60rpx;
		color: #1c1c1c;
		font-weight: 600;
		text-align: center;
		margin-left: 20rpx;
		padding-top:10rpx ;
	}
</style>